<script setup>
import HorizontalBar from "@/components/HorizontalBar.vue";
import Mapchart from "@/components/Mapchart.vue";
import RadarBar from "@/components/RadarBar.vue";
import RelationBar from "@/components/RelationBar.vue";
import RingBar from "@/components/RingBar.vue";
import TotalData from "@/components/TotalData.vue";
import VerticalBar from "@/components/VerticalBar.vue";
import WordCloud from "@/components/WordCloud.vue";
// import { ref } from "vue";
import { onMounted, ref } from "vue";
import { getVisualization } from "@/api/visualization";
const data = ref(null);
const getData = async () => {
  const res = await getVisualization();
  data.value = res;
};
getData();
onMounted(() => {
  getData();
});
setInterval(() => {
  getData();
  console.log(data.value.regionData);
}, 5000);
</script>

<template>
  <div
    class="bg-[url('@/assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-2 flex overflow-hidden"
    v-if="data"
  >
    <!-- 左 -->
    <div class="flex-1 mr-2 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <!-- 横向柱状图 -->
      <HorizontalBar
        class="h-1/3 box-border pb-4"
        :data="data.regionData"
      ></HorizontalBar>
      <!-- 雷达图 -->
      <RadarBar class="h-1/3 box-border pb-4"></RadarBar>
      <!-- 关系图 -->
      <RelationBar class="h-1/3 box-border"></RelationBar>
    </div>
    <!-- 中 -->
    <div class="w-1/2 mr-5 flex flex-col">
      <!-- 数据总览图 -->
      <TotalData class="bg-opacity-50 bg-slate-800 p-3"></TotalData>
      <!-- 地图可视化 -->
      <Mapchart class="flex-1 bg-opacity-50 bg-slate-800 p-3 mt-3"></Mapchart>
    </div>
    <!-- 右 -->
    <div class="flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <!-- 竖向柱状图 -->
      <VerticalBar :data="data.serverData" class="h-1/3 box-border pb-4"></VerticalBar>
      <!-- 环形图 -->
      <RingBar class="h-1/3 box-border pb-4"></RingBar>
      <!-- 文档云图 -->
      <WordCloud class="h-1/3 box-border"></WordCloud>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>
